import SwiftUI
import Charts

struct OtherMarks: View {
    var data: Array<Double> = [75, 25, 92, 50, 30, 60, 52, 88, 66] // 60.67

    var body: some View {
        VStack(spacing: 30) {
            Text("All kinds of marks")
                .font(.largeTitle)
            
            Group {
                Text("Bar mark")
                    .font(.headline)
                Chart {
                    ForEach(data, id: \.self) { d in
                        BarMark(
                            x: PlottableValue.value("Labels", "\(d)"),
                            y: PlottableValue.value("Values", d)
                        )
                        .foregroundStyle(Color.cyan)
                    }
                    
                    
                    RuleMark(y: PlottableValue.value("average", 60.6))
                        .lineStyle(
                            StrokeStyle(lineWidth: 2, dash: [6])
                        )
                        .foregroundStyle(.orange)
                        .annotation(alignment: .leading) {
                            Text("avg score: 60.6")
                                .foregroundColor(.orange)
                        }
                    
                    RuleMark(y: PlottableValue.value("full", 100.0))
                        .lineStyle(
                            StrokeStyle(lineWidth: 2, dash: [6])
                        )
                        .foregroundStyle(.orange)
                        .annotation(alignment: .trailing) {
                            Text("full score: 100.0")
                                .foregroundColor(.orange)
                        }
                }
                .chartYScale(domain: 0...100)
            }
            
            Group {
                Text("Line mark")
                    .font(.headline)
                Chart {
                    ForEach(data, id: \.self) { d in
                        LineMark(
                            x: PlottableValue.value("Labels", "\(d)"),
                            y: PlottableValue.value("Values", d)
                        )
                        .foregroundStyle(Color.brown)
                        
                        PointMark(
                            x: PlottableValue.value("Labels", "\(d)"),
                            y: PlottableValue.value("Values", d)
                        )
                        .foregroundStyle(Color.green)
                    }
                }
            }
            
            
            Group {
                Text("Area mark")
                    .font(.headline)
                Chart {
                    ForEach(data, id: \.self) { d in
                        AreaMark(
                            x: PlottableValue.value("Labels", "\(d)"),
                            y: PlottableValue.value("Values", d)
                        )
                        .foregroundStyle(Color.indigo)
                    }
                }

            }
              
            Group {
                Text("Point mark")
                    .font(.headline)
                Chart {
                    ForEach(data, id: \.self) { d in
                        PointMark(
                            x: PlottableValue.value("Labels", "\(d)"),
                            y: PlottableValue.value("Values", d)
                        )
                        .foregroundStyle(Color.green)
                    }
                }
            }
            
            
            Group {
                Text("Rectangle mark")
                    .font(.headline)
                Chart {
                    ForEach(data, id: \.self) { d in
                        RectangleMark(
                            x: PlottableValue.value("Labels", "\(d)"),
                            y: PlottableValue.value("Values", d)
                        )
                        .foregroundStyle(Color.pink)
                    }
                }
            }
            
        }
        .padding(.horizontal)
    }
}
